<template>
	<div class="content">
		<mt-header fixed title="作业记录">
    	<mt-button icon="back" slot="left" @click="back"></mt-button>	

		</mt-header>
		<div id="testList" v-show="homeWorkList.length>0" class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
			<mt-loadmore :bottom-method="loadBottom" :bottomLoadingText='bottomLoadingText' @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" ref="loadmore">
				<ul>
					<li class="homeBox" v-for="x in currentList">
						<div class="left">
							<div class="coursename">
								{{ x.coursename }}作业&nbsp;&nbsp;{{ (''+x.day).slice(4,6) }}月{{ (''+x.day).slice(6,8) }}日
							</div>
							<div class="testname">
								{{ x.assignmentname }}&nbsp;&nbsp;&nbsp;{{ x.assignmentnums }}题 &nbsp;&nbsp;
								<i class="iconfont icon-zhengque"></i>&nbsp;{{ x.truenums }} &nbsp;&nbsp;&nbsp;
								<i class="iconfont icon-cuowuguanbi1"></i>&nbsp;{{ x.assignmentnums-x.truenums }}
							</div>
							<div class="cutdate">
								截止日期：{{ x.validtime }}
							</div>
						</div>
						<div class="right" @click="exercise(x)">
						</div>
					</li>
				</ul>
			</mt-loadmore>
		</div>
		<div v-if="homeWorkList.length==0" class="noData">
					你还没有提交过作业噢
		</div>
	</div>
</template>

<script>
	import '../../assets/css/iconfont.css'
	import api from '../../api';
	import $ from 'jquery'
	import { mapState, mapMutations } from "vuex";
	import { Loadmore, Indicator } from 'mint-ui';
	import { subjectMatch } from '../../util/util';
	export default {
		data() {
			return {
				allLoaded: false,
				bottomStatus: '',
				wrapperHeight: 0,
				bottomLoadingText: '加载中',
				currentIndex: 0,
				homeWorkList: [],
				currentList: []

			}
		},
		mounted() {
			this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top + 44;
		},
		computed: {
			...mapState(["userlogin", "exerciseInfo"])
		},
		created() {
			this.INIT_STATE();
			var that = this
			//获取提交的作业记录
			api.getStudentAssignmentList({
				courseid: 0,
				studentid: this.userlogin.uid,
				classid: this.userlogin.classid,
				assignmentid: 0,
				recordid: 0,
				dayfrom: 0,
				dayto: 0,
				type: 1
			}).then(response => {
				that.homeWorkList = that.split_Arr(response.data.data, 5)
				that.currentList = that.homeWorkList[that.currentIndex]
			})
			$(function() {
				var h = document.body.clientHeight;
				$('.content').css({
					'min-height': h - 44 + 'px',
					'padding-bottom': '0px'
				})
			})

		},
		methods: {
			...mapMutations(["INIT_STATE", "EXERCISE_ADD"]),
			handleBottomChange(status) {
				this.bottomStatus = status;
			},
			loadBottom() {
				setTimeout(() => {
					if(this.currentIndex < this.homeWorkList.length - 1) {
						this.currentIndex++
							this.currentList = this.currentList.concat(this.homeWorkList[this.currentIndex])
					} else {
						this.bottomLoadingText = '没有更多了'
					}
					this.$refs.loadmore.onBottomLoaded();
				}, 1500);
			},

			split_Arr(arr, len) {
				var result = [];
				for(var i = 0; i < arr.length; i += len) {
					result.push(arr.slice(i, i + len))
				}
				return result
			},
			exercise(x) {
				this.EXERCISE_ADD({
					source_url: '/homeworkHistory',
					aid: x.id,
					coursename: x.coursename
				});
				this.$router.push({
					path: '/exercise'
				})
			},
		back(){
			window.history.back()
		}

		}
	}
</script>

<style scoped>
	.page-loadmore-wrapper {
		overflow: scroll
	}
	
	ul {
		padding: 0;
		margin: 0;
	}
	
	li {
		padding: 0;
		margin: 0;
		list-style: none;
	}
	
	.homeBox {
		width: 6.4rem;
		height: 111px;
		margin-top: 20px;
		background-color: white;
		margin-left: 0.4rem;
		margin-right: 0.4rem;
		display: flex;
		position: relative;
		box-sizing: border-box;
	}
	
	.homeBox>.left {
		flex: 6;
		overflow: hidden;
		font-size: 14px;
		color: #999999;
		text-align: left;
		text-indent: 0.24rem;
	}
	
	.homeBox>.right {
		flex: 4;
		height: 100%;
		background: url(../../assets/images/homeworkDetail.png) no-repeat center;
		background-size: 80%;
		font-size: 12px;
		color: #979797;
		padding-top: 15px;
		box-sizing: border-box;
	}
	
	.icon-zhengque {
		color: #00C853;
	}
	
	.icon-cuowuguanbi1 {
		color: #F13D49
	}
	
	.homeBox>.left>.coursename {
		font-size: 16px;
		color: #4A4A4A;
		margin-top: 15px;
		font-weight: bold;
	}
	
	.homeBox>.left>.testname {
		margin-top: 14px;
		font-size: 12px;
	}
	
	.homeBox>.left>.cutdate {
		margin-top: 10px;
		font-size: 12px;
	}
	.noData {
		height: 250px;
		background: url(../../assets/images/noData.png) no-repeat center;
		background-size: 77px;
		color: #3C3C3C;
		font-size: 14px;
		line-height: 400px;
	}
</style>